<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-29 12:25:06
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-06-02 10:41:18
 * @FilePath: \nsk-ui\src\views\system\rules\index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2025 by user.email, All Rights Reserved. 
-->
<template>
  <div class="rules-container">
    <el-card class="current-rule-card">
      <div class="section-title">当前规则</div>
      <div class="rule-content">
        <div class="rule-row">
          <span class="label">规则内容：</span>
          <span class="value">{{currentRule.rules}}</span>
        </div>
        <el-button type="primary" class="edit-btn" @click="handleEdit">编辑</el-button>
      </div>
    </el-card>
    <el-card class="history-rule-card">
      <div class="section-title">历史规则列表</div>
      <div class="history-list">
        <div class="history-item" v-for="item in historyRules" :key="item.id">
          <div class="history-row">
            <span class="label">修改时间：</span>
            <span class="value">{{ item.createTime }}</span>
          </div>
          <div class="history-row">
            <span class="label">规则内容：</span>
            <span class="value">{{ item.rules }}</span>
          </div>
          <el-divider v-if="item.id !== historyRules[historyRules.length-1].id" />
        </div>
      </div>
    </el-card>
    <div class="pagination-container">
      <span class="total-count">总共 {{ total }} 个项目</span>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[ 10, 20, 30, 50]"
        :total="total"
        layout="prev, pager, next, jumper, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="编辑规则"
      width="800px"
      class="department-dialog"
      @close="resetDialog"
    >
      <el-form :model="dialogForm" label-width="80px" class="dialog-form" :rules="dialogRules" ref="ruleFormRef">
        <el-form-item label="规则" prop="rules">
          <el-input v-model="dialogForm.rules" type="textarea" :rows="4" placeholder="请输入规则" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave(ruleFormRef)">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getList, addData, getLatestRule } from '@/api/rules'
import { ElMessage } from 'element-plus'

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const historyRules = ref([])
const currentRule = ref({rules: ''})

const dialogVisible = ref(false)
const dialogForm = ref({ rules: '' })
const ruleFormRef = ref(null)
const dialogRules = reactive({
  rules: [
    { required: true, message: '请输入', trigger: 'blur' }
  ]
})

function resetDialog() {
  dialogForm.value = { rules: '' }
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields()
  }
}

const handleSave = async (formEl) => {
  if (!formEl) return
  try {
    await formEl.validate()
    // 验证通过，这里可以添加保存逻辑
    console.log('表单验证通过，准备保存数据', dialogForm.value)
    await addData({
      ...dialogForm.value
    })
    ElMessage.success('添加成功')
    dialogVisible.value = false
    resetDialog()
    fetchData();
  } catch (error) {
    console.log('表单验证失败', error)
  }
}
const handleEdit = () => {
  dialogForm.value.rules = currentRule.value.rules
  dialogVisible.value = true
}
const fetchData = async () => {
  const res = await getList({
    isAsc: 'desc',
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  historyRules.value = res.rows || []
  total.value = res.total || 0
}

function handleSizeChange(val) {
  pageSize.value = val
  currentPage.value = 1
  fetchData();
}
function handleCurrentChange(val) {
  currentPage.value = val
  fetchData();
}
const fetchLastRule = async () => {
  const res = await getLatestRule()
  currentRule.value = { rules: res.rules || '' } || { rules: '暂无规则' }
}
onMounted(() => {
  fetchLastRule()
  fetchData()
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>